<!-- param: viewMode-控制显示，id-控制数据加载，mode-控制button加载 -->
<template>
  <el-container>
    <ik-table-page
      v-if="viewMode==='list'"
      :web-path="webPath"
      :bg-path="bgPath"
      :search-items="searchItems"
      :columns="columns"
    />
    <ik-info-page
      v-if="viewMode==='info'"
      ref="infoPage"
      :form-items="formItems"
      :web-path="webPath"
      :bg-path="bgPath"
      :sub-columns="subColumns"
      :use-sub-table="useSubTable"
    />
  </el-container>
</template>
<script>
export default {
  props: {
    searchItems: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    formItems: {
      type: Array,
      default: () => []
    },
    bgPath: {
      type: String,
      required: true
    },
    webPath: {
      type: String,
      required: true
    },
    useSubTable: {
      type: Boolean,
      default: false
    },
    subColumns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // ===== ===== ===== ===== 全局属性 ===== ===== ===== =====
      // 界面模式  info - 信息页, list - 列表页
      viewMode: '',
      // 编辑模式  add - 新增模式, edit - 编辑模式, details - 详情模式, list - 列表模式
      mode: ''
    }
  },
  created() {
    // 获取视图模式
    this.viewMode = this.$route.params.viewMode || "list"
    this.mode = this.$route.params.mode || "list"
  },
  methods: {
    /**
     * 修改表单中的数据
     * @param formData
     */
    updateFormData(formData) {
      this.$refs.infoPage.updateFormData(formData)
    }
  }
}
</script>
<style lang="scss">
@import "~@/styles/listinfo";

.data-directory-tabs-info {
  height: calc(100% - 60px);
}

.data-directory-tabs-info .el-tabs__content {
  height: calc(100% - 53px);
  overflow: auto;
  min-height: 350px;
}
</style>
